<template>
    <el-tooltip effect="dark" :content="tips" placement="bottom">
        <el-icon class="icon-btn" size="24" @click="handleScrrenful">
            <FullScreen />
        </el-icon>
    </el-tooltip>
</template>

<script lang="ts" setup>
import screenfull from 'screenfull'
import { computed, onMounted, onBeforeUnmount } from 'vue'
const props = defineProps({
    isScreenfull: {
        type: Boolean,
        defalut: false
    },
    onFullscreen: Function
})
const tips = computed(() => {
    return !props.isScreenfull ? '全屏' : '退出全屏'
})
const handleScrrenful = () => {
    screenfull.toggle()
}
const handleChange = () => {
    if (props.onFullscreen) {
        props.onFullscreen(!!screenfull.isFullscreen)
    }
    screenfull.isFullscreen

}
onMounted(() => {
    if (screenfull.isEnabled) {
        screenfull.on('change', handleChange);
    }
})
onBeforeUnmount(() => {
    if (screenfull.isEnabled) {
        screenfull.off('change', handleChange);
    }
})
</script>